<template>
  <div id="main" ref="spendEcharts" :style="{ width: Width + 'px', height: Height + 'px' }">

  </div>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts/core';
import { onMounted, toRefs, onBeforeUnmount, watch, nextTick, ref } from 'vue';
import {
  TitleComponent,
  TitleComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>;

const props = defineProps({
  Height: Number,
  Width: Number
})

let { Height, Width } = toRefs(props);
const spendEcharts = ref<HTMLElement | null>(null)

const initChart = () => {
  var chartDom = spendEcharts.value!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    title: {
      text: '总支出',
      top: "7%"
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: "20%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };

  option && myChart.setOption(option);
}

// 监听图表大小变化
watch([Height, Width], () => {
  var chartDom = spendEcharts.value!
  var myChart = echarts.init(chartDom);
  // 重新设置大小
  nextTick(() => {     //在DOM更新完毕后再重新设置图表的大小，确保图表DOM元素能获取到正确的属性
    myChart.resize();
  })
});

onMounted(() => {
  //初始化图表
  initChart();
});
//销毁图表
onBeforeUnmount(() => {
  var chartDom = spendEcharts.value!
  var myChart = echarts.init(chartDom);
  myChart.dispose();
});
</script>
  
<style lang="scss"></style>